<%@ page language="java" errorPage="/error.jsp" pageEncoding="UTF-8"
         contentType="text/html;charset=utf-8" %>
<%@ include file="/common/taglibs.jsp" %>
<head>
    <title>选择商品分类</title>
    <%@ include file="/common/scripts.jsp" %>
    <%@ include file="/common/ztree.jsp" %>

    <s:action name="product-category!getAllCategory" var="categoryList" executeResult="false" namespace=""/>

    <SCRIPT type="text/javascript">
        <!--
        var setting = {
            view: {
                dblClickExpand: false
            },
            check: {
                enable: false
            },
            callback: {
                onRightClick: OnRightClick
            }
        };

        var zNodes =${categoryList.jsonStr};


        function OnRightClick(event, treeId, treeNode) {
            if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {
                zTree.cancelSelectedNode();
                showRMenu("root", event.clientX, event.clientY);
            } else if (treeNode && !treeNode.noR) {
                zTree.selectNode(treeNode);
                showRMenu("node", event.clientX, event.clientY);
            }
        }

        function showRMenu(type, x, y) {
            $("#rMenu ul").show();
            if (type == "root") {
                $("#m_del").hide();
                $("#m_check").hide();
                $("#m_unCheck").hide();
            } else {
                $("#m_del").show();
                $("#m_check").show();
                $("#m_unCheck").show();
            }
            rMenu.css({"top": y + "px", "left": x + "px", "visibility": "visible"});

            $("body").bind("mousedown", onBodyMouseDown);
        }
        function hideRMenu() {
            if (rMenu) rMenu.css({"visibility": "hidden"});
            $("body").unbind("mousedown", onBodyMouseDown);
        }
        function onBodyMouseDown(event) {
            if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length > 0)) {
                rMenu.css({"visibility": "hidden"});
            }
        }
        /**
         *   选择节点
         */
        function chooseNode() {
            hideRMenu();
            var nodes = zTree.getSelectedNodes();
            var myNode = nodes[0];
            if (${param.old==null || param.old==''}) {
                window.location.href = '${ctx}/404.jsp';
            } else {
                window.location.href = '${param.old}?productCategoryId=' + myNode.id + '&productCategoryName=' + myNode.name;
            }
        }

        var zTree, rMenu;
        $(document).ready(function () {
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            zTree = $.fn.zTree.getZTreeObj("treeDemo");
            rMenu = $("#rMenu");
        });
        //-->
    </SCRIPT>
    <style type="text/css">
        div#rMenu {
            position: absolute;
            visibility: hidden;
            top: 0;
            background-color: #555;
            text-align: left;
            padding: 2px;
        }

        div#rMenu ul li {
            margin: 1px 0;
            padding: 0 5px;
            cursor: pointer;
            list-style: none outside none;
            background-color: #DFDFDF;
        }

        ul.ztree {
            margin-top: 10px;
            border: 1px solid #617775;
            background: #f0f6e4;
            width: 1100px;
            height: 660px;
            overflow-y: scroll;
            overflow-x: auto;
        }


    </style>
</head>
<body>

<c:set var="left">product</c:set>

<body>
<div class="main">
    <div class="home_wrapper">
        <%@ include file="/include/left/operation.jsp" %>


        <div class="content_wrap">
            <div class="zTreeDemoBackground left">

                <span class="helptip">提示: 点右键选择分类</span>
                <ul id="treeDemo" class="ztree"></ul>
            </div>
        </div>
        <div id="rMenu">
            <ul>
                <li id="m_add" onclick="chooseNode();">选择</li>
            </ul>
        </div>

    </div>
</div>

</body>